
.hero-carousel {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	&-slide {
		position: relative;
		height: 100%;
		width: 100%;
		overflow: visible;
		margin: 0 auto;
		border: none;
		// box-shadow: 0 0 30px black !important;
	}
	&-background {
		&-blurhash {
			width: 100%;
			height: 100%;
			position: absolute;
			z-index: 1;
			filter: brightness(0.4);
		}
		&-container {
			position: absolute;
			z-index: 0;
			top: -4.4em;
			left: 0;
			right: 0;
			height: 90vh;
			filter: brightness(0.8);
			mask-image: linear-gradient(to left, black 50%, transparent), linear-gradient(to bottom, black 60%, transparent);
				-webkit-mask-image: linear-gradient(to left,
						black 50%,
						transparent), linear-gradient(to bottom, black 40%, transparent);
				mask-composite: intersect;
		}
		&-image {
			position: absolute;
			background-size: cover;
			z-index: 1;
			right: 0;
			top: 0;
			bottom: 0;
			background-position: center;
			object-fit: cover;
			width: 100%;
				height: 90vh;
			transition: opacity 0.5s;
		}
		
		&-icon-container {
			position: absolute;
			// background: $clr-gradient-dark;
			background: url("/src/assets/herobg.png"), rgb(0 0 0 /0.3);
			z-index: 0;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-blend-mode: overlay;
			height: 9%;
			.material-symbols-rounded {
				position: absolute;
				font-size: 15em !important;
				left: 80%;
				top: 50%;
				transform: translate(-50%, -50%);
				font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 50,
				"opsz" 60;
			}
		}
	}
	&-text {
		display: -webkit-box;
		overflow: hidden;
		-webkit-line-clamp: 2;
		margin-bottom: 0.5em;
		&-logo {
			max-width: 34vw;
			max-height: 2.4em;
			object-fit: contain;
			object-position: bottom;
		}
	}
	&-detail {
		position: relative;
		z-index: 0;
		display: flex;
		height: 100%;
		width: 80%;
		padding: $page-margin;
			padding-bottom: 0;
		flex-direction: column;
		justify-content: flex-end;
		align-items: flex-start;
	}
}

.backdropContainer {
	background: linear-gradient(
	45deg,
		$clr-background-default,
		$clr-background-light
	);
}

@media (max-width: 1140px) {
	.carousel{
		height: 60vh !important;
	}
	.hero-carousel{
		&-background-image{
			width: 100%;
		}
		&-text {
			-webkit-line-clamp: 2 !important;
			
				&-logo {
						max-width: 7em;
						max-height: 2em;
						object-fit: contain;
						object-position: bottom;
					}
				}
	}
}